<template>
      <div class="query-table-container">
            <div class="header">
                  <content-header>
                        {{this.title}}

                        <template #right>
                              <slot name="operation"></slot>

                              <el-button v-if="operations.some(o=>o==='export')"
                                    size="medium"
                                    type="success"
                                    icon="el-icon-download"
                                    :loading="exportTable.loading"
                                    @click="exportExcel">导出</el-button>

                              <el-popover v-if="operations.some(o=>o==='column-selector')"
                                    placement="top-start"
                                    title="表格显示项筛选"
                                    width="600"
                                    trigger="click"
                                    @hide="initShowColumns">
                                    <el-button :type="isColumnsShowAll?'':'warning'"
                                          icon="el-icon-menu"
                                          circle
                                          slot="reference"></el-button>
                                    <column-selector :columns="table.cols"
                                          @checkOnChange="columnsOnChange"></column-selector>
                              </el-popover>

                              <el-button v-if="showSearch"
                                    :type="isSearchEmpty?'':'warning'"
                                    icon="el-icon-search"
                                    circle
                                    @click="searchOnClick"></el-button>
                        </template>
                  </content-header>
            </div>

            <div class="content">
                  <div v-if="filterRequire && isSearchEmpty"
                        class="empty">
                        <slot name="filterRequire">
                              <el-button @click="searchOnClick">
                                    填写至少一个筛选项 <i class="el-icon-right"></i>
                              </el-button>
                        </slot>
                  </div>

                  <div v-else-if="!table.loading && isTableEmpty"
                        class="empty">
                        {{emptyText}}
                  </div>

                  <template v-else>
                        <main-table class="table"
                              ref="table"
                              :rowIndex="showRowIndex"
                              :loading="table.loading"
                              :cols="table.cols"
                              :dataSource="table.rows"
                              :height="tableHeight">
                        </main-table>

                        <el-pagination class="pagination"
                              @current-change="onCurrentChange"
                              :current-page.sync="table.pageNo"
                              :page-size="table.pageSize"
                              layout="total, prev, pager, next"
                              :total="table.total">
                        </el-pagination>
                  </template>
            </div>

            <el-drawer v-if="showSearch"
                  class="search-drawer"
                  ref="searchDrawer"
                  size="400px"
                  :visible.sync="search.visible"
                  direction="rtl">
                  <search-panel ref="search"
                        :labelWidth="searchLabelWidth"
                        :filters="filters"
                        @onSearch="onSearch"></search-panel>
            </el-drawer>

            <export-table style="display:none"
                  ref="exportTable"
                  :heads="table.cols.map(col=>col.text)"
                  :rows="exportTable.rows">
            </export-table>
      </div>
</template>

<script>
import mainTable from './main'
import columnSelector from './column-selector'
import searchPanel from '@components/search'
import exportTable from '@components/export-table'
import columnsSelectorMixin from './mixins/column-selector'
import exportTableMixin from './mixins/export-table'
import headerMixin from './mixins/header'
import mainMixin from './mixins/main'
import searchMixin from './mixins/search'

export default {
      components: { mainTable, columnSelector, searchPanel, exportTable },
      mixins: [columnsSelectorMixin, exportTableMixin, headerMixin, mainMixin, searchMixin],
      created() {
            this.initTable()
            this.getStorageHideColumns()
            this.initFilterByRoute()
            this.loadTable()
      }
}
</script>

<style lang="scss" scoped>
.query-table-container {
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .header {
            height: 40px;
            background: #ffffff;
      }

      .content {
            flex: 1;
            display: flex;
            flex-direction: column;

            .table {
                  flex: 1;
            }

            .pagination {
                  text-align: right;
                  margin: 10px 20px;
                  height: 28px;
            }

            .empty {
                  text-align: center;
                  padding-top: 100px;
                  font-size: 20px;
                  color: #c0c4cc;
            }
      }
}
</style>
